<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>css3-media-queries-demo</title>
		<style>
			body,
			div,
			dl,
			dt,
			dd,
			ul,
			ol,
			li,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			pre,
			form,
			fieldset,
			input,
			textarea,
			p,
			blockquote,
			th,
			td {
				padding: 0;
				margin: 0;
			}
			
			.content {
				zoom: 1;
			}
			
			.content:after {
				content: ".";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}
			
			.leftBox,
			.rightBox {
				float: left;
				width: 20%;
				height: 500px;
				margin: 5px;
				background: #ffccf7;
				display: inline;
				-webkit-transition: width 1s ease;
				-moz-transition: width 1s ease;
				-o-transition: width 1s ease;
				-ms-transition: width 2s ease;
				transition: width 1s ease;
			}
			
			.middleBox {
				float: left;
				width: 50%;
				height: 800px;
				margin: 5px;
				background: #b1fffc;
				display: inline;
				-webkit-transition: width 1s ease;
				-moz-transition: width 1s ease;
				-o-transition: width 1s ease;
				-ms-transition: width 1s ease;
				transition: width 1s ease;
			}
			
			.rightBox {
				background: #fffab1;
			}
			
			@media only screen and (min-width: 1024px) {
				.content {
					width: 1000px;
					margin: auto
				}
			}
			
			@media only screen and (min-width: 400px) and (max-width: 1024px) {
				.rightBox {
					width: 0;
				}
				.leftBox {
					width: 30%
				}
				.middleBox {
					width: 65%
				}
			}
			
			@media only screen and (max-width: 400px) {
				.leftBox,
				.rightBox,
				.middleBox {
					width: 98%;
					height: 200px;
				}
			}
		</style>
	</head>

	<body>
		<div class="content">
			<div class="leftBox"></div>
			<div class="middleBox"></div>
			<div class="rightBox"></div>
		</div>
	</body>

</html>